<!--<template>-->
<!--  <div style="width: 100%; height: 100%; display: flex">-->
<!--    <div-->
<!--      style="-->
<!--        width: 9%;-->
<!--        min-height: 100px;-->
<!--        position: absolute;-->
<!--        z-index: 10;-->
<!--        top: 30px;-->
<!--        left: 30px;-->
<!--      "-->
<!--    >-->
<!--      <el-tree-->
<!--        style="-->
<!--          background-color: rgba(64, 158, 255, 0.88);-->
<!--          color: #eeeeee;-->
<!--          border-radius: 20px;-->
<!--          padding: 5px;-->
<!--        "-->
<!--        :data="dataTree"-->
<!--        ref="treeRef"-->
<!--        highlight-current-->
<!--        accordion-->
<!--        :render-content="renderContent"-->
<!--        :props="defaultProps"-->
<!--        default-expand-all-->
<!--        node-key="id"-->
<!--        @node-click="handleNodeClick"-->
<!--      ></el-tree>-->
<!--    </div>-->
<!--    <div id="container" style="width: 100%; height: 100%"></div>-->
<!--    &lt;!&ndash;    <box v-if="open"></box>&ndash;&gt;-->
<!--    <el-dialog :visible.sync="showDialog" title="门店信息" width="40%">-->
<!--      <div>门店名称：{{ storeInfo.name }}</div>-->
<!--      <div>-->
<!--        摄像头列表：-->
<!--        <el-link-->
<!--          v-for="(item, index) in formatSerialNumber(-->
<!--            this.storeInfo.serialNumber-->
<!--          )"-->
<!--          :key="index"-->
<!--          style="color: #66b1ff; text-decoration: underline; margin-right: 10px"-->
<!--          @click="_open(item)"-->
<!--        >-->
<!--          {{ item }}-->
<!--        </el-link>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--    <open-cctv ref="cctv"></open-cctv>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--// import box from './components/videoControl.vue';-->
<!--import openCctv from './componentDialog/openCctv.vue'-->

<!--export default {-->
<!--  name: 'earth',-->
<!--  // meta: {title: "视频地图", icon: "el-icon-basketball", authorityList: 300,sort:1},-->
<!--  components: {-->
<!--    openCctv,-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      map: null,-->
<!--      open: false,-->
<!--      dataTree: [-->
<!--        {-->
<!--          label: '品牌方列表',-->
<!--          // icon: "el-icon-basketball",-->
<!--          id: '',-->
<!--          children: [],-->
<!--        },-->
<!--      ],-->
<!--      showDialog: false,-->
<!--      storeInfo: {},-->
<!--      defaultProps: {-->
<!--        children: 'children',-->
<!--        label: 'label',-->
<!--      },-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.$api.assignGetMapStoreVo({ brandPartyId: '' }).then((res) => {-->
<!--      this.initMap(res)-->
<!--    })-->
<!--    // this.initVideoControl();-->
<!--    this.$api.assignGetBrandPartyVo().then((res) => {-->
<!--      res.map((a) => {-->
<!--        a.label = a.brandPartyName-->
<!--        a.id = a.id-->
<!--        // a.icon = 'el-icon-place'-->
<!--      })-->
<!--      res.unshift({-->
<!--        label: '全部',-->
<!--        id: '',-->
<!--        // icon: 'el-icon-place'-->
<!--      })-->
<!--      this.dataTree[0].children = res-->
<!--    })-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    // 销毁前释放地图资源-->
<!--    if (this.map) {-->
<!--      this.map.destroy()-->
<!--      this.map = null-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    handleNodeClick(data) {-->
<!--      console.log(data)-->
<!--      this.$api.assignGetMapStoreVo({ brandPartyId: data.id }).then((res) => {-->
<!--        if (res.length == 0) {-->
<!--          this.$message.success('该品牌方暂无门店列表！')-->
<!--        }-->
<!--        this.initMap(res)-->
<!--      })-->
<!--    },-->
<!--    formatSerialNumber(val) {-->
<!--      if (!val) return []-->
<!--      if (typeof val === 'string') {-->
<!--        return val-->
<!--          .split(',')-->
<!--          .map((s) => s.trim())-->
<!--          .filter(Boolean)-->
<!--      }-->
<!--      if (Array.isArray(val)) {-->
<!--        return val-->
<!--      }-->
<!--      return [val]-->
<!--    },-->
<!--    renderContent(h, { node, data, store }) {-->
<!--      const isImg =-->
<!--        data.icon &&-->
<!--        (data.icon.startsWith('http') ||-->
<!--          data.icon.endsWith('.png') ||-->
<!--          data.icon.endsWith('.jpg') ||-->
<!--          data.icon.endsWith('.svg'))-->
<!--      return h('span', { class: 'custom-tree-node' }, [-->
<!--        isImg-->
<!--          ? h('img', {-->
<!--              attrs: {-->
<!--                src: data.icon,-->
<!--                width: '16',-->
<!--                height: '16',-->
<!--              },-->
<!--              style: {-->
<!--                marginRight: '6px',-->
<!--              },-->
<!--            })-->
<!--          : h('i', { class: data.icon, style: { marginRight: '6px' } }),-->
<!--        h('span', data.label),-->
<!--      ])-->
<!--    },-->
<!--    _open(item) {-->
<!--      this.$api-->
<!--        .firmCameraGetLiveAddress({ serialNumber: item, type: 1 })-->
<!--        .then((res) => {-->
<!--          this.$refs.cctv.init(res, item)-->
<!--        })-->
<!--    },-->
<!--    // initVideoControl() {-->
<!--    //   oWebControl = new WebControl({-->
<!--    //     szPluginContainer: 'playWnd', // 与控件关联的dom节点id-->
<!--    //     iServicePortStart: 14510, // 对应 LocalServiceConfig.xml 中的ServicePortStart值-->
<!--    //     iServicePortEnd: 14519, // 对应 LocalServiceConfig.xml 中的ServicePortEnd值-->
<!--    //     cbConnectSuccess: (e) => {-->
<!--    //       console.log(e)-->
<!--    //     }, // 成功回调-->
<!--    //     cbConnectError: (err) => {-->
<!--    //       console.log(err)-->
<!--    //     }, // 失败回调-->
<!--    //     cbConnectClose: (err) => {-->
<!--    //       console.log(err)-->
<!--    //     } // 意外断开回调-->
<!--    //   });-->
<!--    // },-->

<!--    initMap(res) {-->
<!--      this.map = new AMap.Map('container', {-->
<!--        resizeEnable: true,-->
<!--        center: [112.98, 28.19],-->
<!--        zoom: 10,-->
<!--      })-->
<!--      var scale = new AMap.Scale({-->
<!--        visible: false,-->
<!--      })-->
<!--      var toolBar = new AMap.ToolBar({-->
<!--        visible: false,-->
<!--        position: {-->
<!--          top: '110px',-->
<!--          right: '40px',-->
<!--        },-->
<!--      })-->
<!--      var controlBar = new AMap.ControlBar({-->
<!--        visible: false,-->
<!--        position: {-->
<!--          top: '10px',-->
<!--          right: '10px',-->
<!--        },-->
<!--      })-->
<!--      var mapType = new AMap.MapType({-->
<!--        position: 'RT',-->
<!--      })-->
<!--      this.map.addControl(scale)-->
<!--      // this.map.addControl(toolBar);-->
<!--      // this.map.addControl(controlBar);-->
<!--      this.map.addControl(mapType)-->
<!--      scale.show()-->
<!--      // toolBar.show();-->
<!--      // controlBar.show();-->
<!--      // overView.show();-->
<!--      const markers = res.map((el) => {-->
<!--        const lng = parseFloat(el.position[1])-->
<!--        const lat = parseFloat(el.position[0])-->
<!--        const icon = new AMap.Icon({-->
<!--          image: 'https://renovationcdn.jiachuangnet.com/icon.png',-->
<!--          size: new AMap.Size(32, 32), // 宽高，单位像素-->
<!--          imageSize: new AMap.Size(32, 32), // 实际渲染的图标大小-->
<!--        })-->
<!--        return new AMap.Marker({-->
<!--          position: [lng, lat],-->
<!--          icon: icon,-->
<!--          title: el.title,-->
<!--          extData: { serialNumber: el.serialNumber, name: el.title },-->
<!--        })-->
<!--      })-->

<!--      markers.forEach((marker) => {-->
<!--        this.map.add(marker)-->
<!--        marker.on('click', () => {-->
<!--          this.open = true-->
<!--          const data = marker.getExtData()-->
<!--          this.storeInfo = data-->
<!--          this.showDialog = true-->
<!--        })-->
<!--      })-->
<!--    },-->
<!--  },-->
<!--}-->
<!--</script>-->
<!--<style scoped lang="less">-->
<!--::v-deep .el-tree .el-tree-node.is-current > .el-tree-node__content {-->
<!--  height: 30px;-->
<!--  background-color: rgba(26, 132, 232, 0.6);-->
<!--  /* 提亮 */-->
<!--  color: #ffffff;-->
<!--  border-radius: 4px;-->
<!--}-->

<!--::v-deep .el-tree .el-tree-node__content:hover {-->
<!--  background-color: rgba(255, 255, 255, 0.15);-->
<!--  color: #fff;-->
<!--  border-radius: 4px;-->
<!--}-->

<!--::v-deep .el-tree-node__content {-->
<!--  height: 30px;-->
<!--}-->
<!--</style>-->
